<template>
  <div id="searchInput" class="search-input">
    <router-link to='/'><div class="logo"><img src="../../assets/image/logo.png" class="logo-img" alt=""></div></router-link>
    <div class="genre" id="genre_1">
      <p data-value="SCDB" @click="change_classify(0,'SCDB',$event)" class="active">综合</p>
      <p data-value="CJFQ" @click="change_classify(1,'CJFQ',$event)">期刊</p>
      <p data-value="CDMD" @click="change_classify(2,'CDMD',$event)">博硕</p>
      <p data-value="CIPD" @click="change_classify(3,'CIPD',$event)">会议</p>
      <p data-value="CCND" @click="change_classify(4,'CCND',$event)">报纸</p>
    </div>
    <div class="start-search">
      <input id="search_input" type="text" @keypress="keypress" v-model="keyword"><router-link :to="{
        path: '/searchList',
        name:'searchList',
        query: {
          keyword: keyword,
          classify:classify,
          sort_value: this.Global.sort_value
          
        }
        }"><span id="search_btn">搜索</span></router-link>
    </div>
    <div class="card-title" id="genre_2">
      <p data-value="SCDB" @click="change_classify(0,'SCDB',$event)" class="active">综合</p>
      <p data-value="CJFQ" @click="change_classify(1,'CJFQ',$event)">期刊</p>
      <p data-value="CDMD" @click="change_classify(2,'CDMD',$event)">博硕</p>
      <p data-value="CIPD" @click="change_classify(3,'CIPD',$event)">会议</p>
      <p data-value="CCND" @click="change_classify(4,'CCND',$event)">报纸</p>
    </div>
  </div>
</template>

<script>
let upFlag = false;
var this0 = this;

export default {
  data() {
    return {
      keyword: "",
      classify: "SCDB"
    };
  },
  watch : {
    
  },

  methods: {
    change_classify: function(index, msg, event) {
      //防止热词进来不改变this.keyword的值
      if (this.$route.params.keyword) {
        this.keyword = this.$route.params.keyword
      }
      //样式变化
      $("#genre_2 p").removeClass("active");
      // $(event.currentTarget).addClass('active')
      $("#genre_2 p:eq(" + index + ")").addClass("active");
      this.classify = msg;
      // 改变刷新数据
      this.$router.push({
        path: "/searchList",
        name: "searchList",
        query: {
          keyword: this.keyword,
          classify: msg,
          sort_value: this.Global.sort_value
        },
        params: {
          keyword: this.keyword,
          classify: msg,
          sort_value: this.Global.sort_value
        }
      });
    },
    // 添加时间处理程序兼容事件--后期学习
    addEvent: function(window, undefined) {
      var _eventCompat = function(event) {
        var type = event.type;
        if (type == "DOMMouseScroll" || type == "mousewheel") {
          event.delta = event.wheelDelta
            ? event.wheelDelta / 120
            : -(event.detail || 0) / 3;
        }
        //alert(event.delta);
        if (event.srcElement && !event.target) {
          event.target = event.srcElement;
        }
        if (!event.preventDefault && event.returnValue !== undefined) {
          event.preventDefault = function() {
            event.returnValue = false;
          };
        }
        /* 
               ......其他一些兼容性处理 */
        return event;
      };
      if (window.addEventListener) {
        return function(el, type, fn, capture) {
          if (type === "mousewheel" && document.mozFullScreen !== undefined) {
            type = "DOMMouseScroll";
          }
          el.addEventListener(
            type,
            function(event) {
              fn.call(this, _eventCompat(event));
            },
            capture || false
          );
        };
      } else if (window.attachEvent) {
        return function(el, type, fn, capture) {
          el.attachEvent("on" + type, function(event) {
            event = event || window.event;
            fn.call(el, _eventCompat(event));
          });
        };
      }
      return function() {};
    },
    // enter转换路由
    keypress: function(event) {
      if (event.charCode == "13" || event.code == "Enter") {
        this.$router.push({
          path: "/searchList",
          name: "searchList",
          query: {
            keyword: this.keyword,
            classify: this.classify,
            sort_value: this.Global.sort_value
          }
        });
      }
    }
  },
  mounted:function () {
    // 监听滚轮隐藏input框
    $(window).scroll(function (event) { 
      if ($(this).scrollTop() > 100) {
        // $('.start-search').hide()
        $('.input-box').css("top","-100px")
        $('.start-search').css({
          opacity:0
        })
        // $('.card-title p').css({
        //   background:'none'
        // })
      }else  {
        $('.start-search').css({
          opacity:1
        })
        // $('.card-title p').css({
        //   background:'#fff'
        // })
        $('.input-box').css("top","0px")
      }
    })
  }
};
</script>

<style scoped>
.search-input {
  width: 45%;
  margin: 0 auto;
  margin-top: 6%;
  transition: all 0.5s;
  /* position: fixed; */
  left: 0;
  right: 0;
  z-index: 999;
  /* height: 175px; */
}
.search-up {
  margin-top: 50px;
  transition: all 0.5s;
}
.logo-up {
  /* transform: translate(-100%, 60%); */
  animation: logo-out 0.5s forwards;
}
@keyframes logo-out {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
  60% {
    opacity: 0;
  }
  100% {
    position: fixed;
    top: 5px;
    left: 5px;
    opacity: 1;
  }
}
.logo {
  font-size: 65px;
  margin-bottom: 30px;
  transition: all 0.5s;
  cursor: pointer;
  color: white;
  /* position: relative; */
  z-index: 999;
}
.logo .logo-img {
  width: 200px;
}
.genre {
  display: flex;
  justify-content: left;
  align-content: center;
  padding-left: 13%;
  font-size: 16px;
}
.genre p {
  padding: 0 20px;
  line-height: 25px;
  height: 25px;
  cursor: pointer;
  position: relative;
  top: -10px;
  text-align: center;
  transition: all 0.1s;
  min-width: 35px;
}
/* .genre p:hover {
  background: white;
  color:#7b99da;
} */
.genre p:before,
.genre p:after {
  position: absolute;
  opacity: 0;
  display: inline-block;
  line-height: 25px;
  height: 25px;
}
.genre p::before {
  content: "\5B";
  left: 8px;
  transition: all 0.5s;
}
.genre p::after {
  content: "\5D";
  right: 8px;
  transition: all 0.5s;
}
/* .genre p:hover::before, .genre p:hover::after { position: absolute; } */
.genre p:hover::before {
  content: "\5B";
  left: 0px;
  opacity: 1;
}
.genre p:hover::after {
  content: "\5D";
  right: 0px;
  opacity: 1;
}
p.active {
  border-top: 4px solid #e86f6e !important;
  border-right: 1px solid rgb(194, 192, 192) !important;
  border-left: 1px solid rgb(194, 192, 192) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0) !important;
}
.start-search {
  min-width: 360px;
  margin: 50px 0;
  transition: opacity 1s;
}
.start-search input {
  position: relative;
  width: 75%;
  line-height: 35px;
  height: 35px;
  border-radius: 20px 0 0 20px;
  border: 1px solid gray;
  border-right: none;
  /* box-shadow: 0px 0px 10px #e86f6e; */
  outline: none;
  text-indent: 18px;
  z-index: 999;
}
.start-search span {
  line-height: 34px;
  height: 35px;
  display: inline-block;
  border-radius: 0 20px 20px 0;
  border-left: none;
  padding: 0 25px;
  background: #e86f6e;
  border: 1px solid #e86f6e;
  color: white;
  /* box-shadow: 0px 0px 10px #e86f6e; */
  cursor: pointer;
  position: relative;
  z-index: 999;
}
.high-search {
  display: flex;
  justify-content: center;
  align-content: center;
}
.high-search p {
  padding-right: 15px;
  line-height: 25px;
}
.card-title {
  color: black;
  background: none;
  position: relative;
  left: -120px;
  width: 100%;
  box-sizing: border-box;
}
.card-title p {
  display: inline-block;
  width: 19%;
  line-height: 46px;
  float: left;
  background: white;
  border-top: 4px solid rgba(0, 0, 0, 0);
  border-right: 1px solid rgba(0, 0, 0, 0);
  border-left: 1px solid rgba(0, 0, 0, 0);
  border-bottom: 1px solid rgb(194, 192, 192);
  cursor: pointer;
}
.card-title p:hover {
  border-top: 4px solid #e86f6e;
  /* border-right: 1px solid rgb(194, 192, 192);
  border-left: 1px solid rgb(194, 192, 192); */
  /* border-bottom: 1px solid rgba(0, 0, 0, 0); */
}

/*媒体查询适配移动端*/
@media screen and (max-width: 700px) {
  .search-input {
    width: 100%;
    margin-top: 13vh;
  }
  .start-search {
    margin: 0;
    height: 6vh;
  }
  .logo-up {
    margin: 0 !important;
  }
  .search-up {
    margin-top: 11vh !important;
  }
  .logo-up img{
    width: 100px !important;
    vertical-align: top;
    margin: 0;
  }
  /* .card-title {
   
    height: 29px;
  }
  .card-title p {
    width: 15%;
    line-height: 30px;
  } */
  .genre {
    margin: 3vh 0px 0 0;
    height: 4vh;
  }
  .genre p {
    padding: 0px 10px;
    vertical-align: top;
  }
  .genre_2 {
    height: 30px;
  }
  .logo {
    /* margin-bottom: 20px;
    margin-top: 20px; */
    margin: 0;
    height: 12vh;
  }
  .logo .logo-img {
    width: 150px;
  }
  .card-title {
    left: 0%;
    background: none;
    height: 4.4vh;
    margin-top: 4vh;
    overflow: hidden;
  }
  .card-title p {
    background: none;
    line-height: 4.5vh;
    color: white;
    border: none;
    width: 20%;
    font-size: 16px;
  }
  p.active {
    border: none !important;
    /* background:#e86f6e; */
    /* border-bottom: 3px solid #e86f6e !important; */
    background: url(../../assets/image/p-active.png) no-repeat;
    background-size: 100% 31px;
    font-weight: 600;
  }
}
</style>
